<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--以上3个meta 必须 放在最前面，其他都 必须放在后面-->
    <title>7.6响应式导航栏</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--collapsed 折叠-->
<!--data-toggle:指定出发的形式 data-target:指定出发的目标元素-->
<nav class="navbar navbar-default" role="navigation">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
            aria-expanded="false">
        <span class="sr-only">汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <!--    这里可以定义品牌图标-->
    <div class="navbar-header">
        <a class="navbar-brand" id="nav-brand-itheima" href="#">
            网站首页
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">系列教程</a></li>
            <li><a href="#">名师介绍</a>
                <a href="#">成功案例</a>
                <a href="#">关于我们</a></li>
        </ul>
    </div>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>